<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       div{
           
       }
    </style>
</head>
<body>
    <div id="obox" class="box t-box" data-href="/localhost">你好</div>
    <div id="tt-box" style="width:200px;height:200px;border:1px solid red;">
        <div class="s-box" id="m-box">
            <div class="ss-box"></div>
        </div>
        <div class="last-child"></div>
    </div>
    <img src="./image/区别.gif" alt="">
    <div id="changedom">
        <div class="firstdom"></div>
    </div>
    <div id="css-box" style="width:100px;height:100px"></div>
    <form action="" id="fm">
        <input type="text" id="ipt">
        <input type="checkbox" name="" id="man"><label for="man">男</label>
        <input type="checkbox" name="" id="woman"><label for="woman">女</label>
    </form>
    
<script>
    function log(a){
      console.log(a)
    }
    console.log(document) //文档对象模型 
    console.log(document.firstElementChild) //html 
    console.log(document.firstElementChild.firstChild) //head 
    console.log(document.firstElementChild.firstElementChild) //head 
    console.log(document.head) //head 
    console.log(document.body) //body 
    console.log(document.body.firstElementChild) //div=>object 
    console.log(document.domain) //返回当前域名document.domain属性返回当前文档的域名，不包含协议和接口。比如，网页的网址是http://www.example.com:80/hello.html，那么domain属性就等于www.example.com。如果无法获取域名，该属性返回null
    
    //dom节点的获取;
    var classDom = document.getElementsByClassName('box'); 
    log(classDom) //=> array like
    var idDom = document.getElementById('obox');
    log(idDom) //=>object
    var tagDom = document.getElementsByTagName('div')
    log(tagDom) //=> array like
    var queryEle = document.querySelector('.box')
    log(queryEle) // =>obj defalt 取0操作
    var queryAllEle = document.querySelectorAll('div')
    log(queryAllEle)// => array like 

    //节点属性读取 , 插入 , 删除 
    log(idDom.tagName) //标签名 
    log(idDom.className) //string 类型class名   有几个返回几个
    log(idDom.id) //id名  
    log(idDom.draggable) // 元素是否可以拖动 
    log(idDom.hidden) //false 是否隐藏 
    log(idDom.hidden = true) //隐藏 hidden 属性可以设置
    log(idDom.attributes) //返回dom节点的所有属性 [id,class,hidden]; 
    log(idDom.classList) //=>array like 伪数组 
       var clEle = idDom.classList;
       //classList对象有以下方法
       clEle.add('p-box'); //添加一个class
       clEle.remove('box') //移除一个class
       log(clEle.contains('t-box')) //true 判断是否存在布尔值
       clEle.toggle('p-box') // 若果节点存在元素，则执行remove，不存在则执行add
       clEle.add('y-box')
       log(clEle) 
       log(clEle.item(1)) //返回当前下标的元素 
       //className 对象的方法  
       var cnEle = idDom.className; 
       log(cnEle) 
       cnEle+='kl-box' //无效。禁止使用变量接收 
       idDom.className+=' kl-box' //注意空格一下 
    //data自定义属性读取 
    log(idDom.dataset.href) //读取data开头的属性，自定义属性 
    idDom.dataset.href = '/localhost:88' //设置自定义属性 
    log(idDom.dataset.href) ///localhost:88 
    log(idDom.getAttribute('data-href')) //localhost:88  
    idDom.innerHTML = "这是一端插入的文本" 
    idDom.hidden = false; 
    var html = '<div style="width:200px;height:200px;border:1px solid red;"></div>' 
    //idDom.innerHTML = html; 
    log(idDom.outerHTML) //返回包含当前节点的html 
    //style 样式的操作 
    var cssBox = document.getElementById('css-box');
    log(cssBox.style.width)
    cssBox.style.width = "400px"
    //元素节点查找 
    var sBox = document.getElementById('tt-box') 
    log(sBox.children) //=>array like 
    log(sBox.firstElementChild) //=>第一个元素 
    log(sBox.lastElementChild) //=>最后一个元素 

    log(sBox.nextElementSibling) //=>下一个元素
    log(sBox.nextElementSibling.previousElementSibling) //=>上一个元素
    log(sBox.children) //下代元素
    var mbox = document.getElementById('m-box');
    log(mbox.parentElement)
    log(mbox.parentNode)
    //sBox.remove() 
    //属性操作 
    var attr = sBox.attributes; 
    log(attr) //value 的数组
    sBox.setAttribute('class','hao 你好');
    //dom 更改
    var changedom = document.getElementById('changedom');
    var div = document.createElement('div');
    var div2 = document.createElement('div');
    div2.setAttribute('style','width:200px;height:200px;border:1px solid #999')
    div.setAttribute('style','width:200px;height:200px;border:1px solid blue;')
    changedom.appendChild(div) //插入的是节点而非String;插入节点最后一个位置
    //changedom.appendChild(div2) 
    //changedom.removeChild(div) 
    //changedom.replaceChild(div2,div)//替换 @param1:替换后的元素，@param2：要替换的元素 ；
    changedom.insertBefore(div2,div); //@param1:要插入的元素，@param2：在哪个元素之前插入；
    //练习JS生成元素；
    // 1:生成一个div，width=>200 height=>200 borde=>1px solid red;该元素内部存在一个比他小一半的元素，边框为蓝色；
    //表单操作
    //监听操作 oninput
    var ipt = document.getElementById('ipt');
    var fm = document.getElementById('fm')
    ipt.value = 1
    // ipt.oninput = function(){
    //    console.log(this.value)
    // }
    //失去焦点才能调用 onchange
    // ipt.onchange = function(){ 
    //     console.log(this.value)
    // }
    // ipt.onselect = function(){
    //     console.log(this.value)
    // }
    //checkbox
    var man = document.getElementById('man');
    man.setAttribute('checked','false')
    man.removeAttribute('checked')
</script>
</body>  
</html> 